<template>
	<div class="game-center clearfix">
		<div class="left fl">
			<a :href="games.banner.url" target="_blank" class="banner">
				<img :src="games.banner.img" />
				<span class="text">{{games.banner.text}}</span>
			</a>
			<div class="brief">
				<a v-for="item in games.brief" :key="item.id" :href="item.url" target="_blank" class="list hovering">
					<img :src="item.img" />
					<span>{{item.text}}</span>
				</a>
			</div>
		</div>
		<div class="right fl">
			<div class="box">
				<a v-for="item in games.more" :key="item.id" :href="item.url" target="_blank" class="list hovering">
					<img class="game-img" v-show="hovering==item.id" :src="item.img" />
					<span class="text" @mouseenter="hovering=item.id" @mouseout="hovering=0">{{item.text}}</span>
				</a>
			</div>
		</div>
		<span class="triangle"><Icon type="arrowUp"/></span>
	</div>
</template>

<script>
export default{
	data(){
		return{
			hovering: 0
		}
	},
	computed:{
		games(){
			return this.$store.state.pops.games;
		}
	},
	methods:{
		getData(){
			let games = {
				where: 'pops/getGames',
				url: '/mock/games',
				method: 'post'
			}
			this.$store.dispatch('global/request', games);
		}
	},
	mounted() {
		this.getData();
	}
}
</script>

<style lang="less" scoped>
.game-center{
	width: 466px;
	height: 256px;
	padding-top: 12px;
	box-sizing: border-box;
	border-radius: 0 0 4px 4px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
	position: relative;
	background: #fff;
	.left{
		width: 265px;
		.banner{
			position: relative;
			display: block;
			margin: 0 12px;
			.text{
				width: 220px;
				padding: 0 10px;
				border-radius: 4px;
				position: absolute;
				bottom: 0px;
				left: 0px;
				font-size: 12px;
				line-height: 30px;
				text-shadow: 1px 1px 1px #000;
				color: #fff;
				background: url(https://static.biligame.net/biligametop/img/shadow.png) repeat-x;
			}
		}
		.brief{
			margin-top: 6px;
			a{
				width: 64px;
				height: 104px;
				padding: 6px 12px 0;
				display: block;
				float: left;
				overflow: hidden;
				img{
					width: 64px;
					height: 64px;
					border-radius: 12px;
				}
				span{
					width: 4em;
					height: 14px;
					margin: 8px auto;
					display: block;
					font-size: 14px;
					line-height: 1;
					text-align: center;
					color: #222;
					overflow: hidden;
				}
			}
		}
	}
	.right{
		width: 201px;
		min-height: 234px;
		margin: 12px 0 0 0;
		background: url(https://static.biligame.net/biligametop/img/line.png) no-repeat;
		.box{
			position: relative;
			padding: 35px 0 0 6px;
			background: url(https://static.biligame.net/biligametop/img/title.png) no-repeat;
			.list{
				padding-left: 16px;
				display: block;
				font-size: 12px;
				line-height: 28px;
				color: #222;
				.game-img{
					position: absolute;
					left: 15em;
					bottom: 0;
				}
				.text{
					width: 13em;
					height: 28px;
					display: block;
					line-height: 28px;
					overflow: hidden;
				}
			}
		}
	}
}
</style>
